// pages/components/WikiContent.vue
<template>
  <view class="content-container">
    <!-- 加载状态 -->
    <view v-if="isLoading" class="loading-wrapper">
      <view class="loading-content">
        <uni-load-more status="loading" color="#3498db"></uni-load-more>
        <text class="loading-text" user-select>内容加载中...</text>
      </view>
    </view>

    <!-- 内容展示 -->
    <template v-else>
      <view v-if="selectedListData" class="content-wrapper">
        <!-- 头部区域 -->
        <view class="content-header">
          <text class="content-title" user-select>{{ selectedListData.title }}</text>
          <view class="meta-info">
            <view class="meta-item">
              <uni-icons type="calendar" size="14" color="#7f8c8d"></uni-icons>
              <text class="meta-text" user-select>更新: {{ formatDate(selectedListData.updatedAt) }}</text>
            </view>
            <view v-if="selectedSingleData" class="meta-item">
              <uni-icons type="compose" size="14" color="#7f8c8d"></uni-icons>
              <text class="meta-text" user-select>类型: {{ selectedSingleData.contentType }}</text>
            </view>
          </view>
        </view>

        <!-- 描述区域 -->
        <view v-if="selectedListData.description" class="description-box">
          <text class="description-text" user-select>{{ selectedListData.description }}</text>
        </view>

        <!-- 正文内容 -->
        <view v-if="selectedSingleData" class="markdown-content">
          <Markdown :source="selectedSingleData.content" :type="selectedSingleData.contentType" />
        </view>

        <!-- 空状态 -->
        <view v-else class="empty-tip">
          <image class="empty-image" src="/static/empty-doc.png" mode="aspectFit"></image>
          <text class="empty-text" user-select>选择左侧内容查看详情</text>
        </view>
      </view>

      <!-- 初始空状态 -->
      <view v-else class="welcome-container">
        <image class="welcome-image" src="/static/logo.png" mode="aspectFit"></image>
        <text class="welcome-title" user-select>知识库管理系统</text>
        <text class="welcome-subtitle" user-select>请从左侧目录选择内容开始阅读</text>
      </view>
    </template>
  </view>
</template>

<script>
import Markdown from './markdown.vue';
import uniIcons from '../../node_modules/@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
import uniLoadMore from '@dcloudio/uni-ui/lib/uni-load-more/uni-load-more.vue'
export default {
  components: {
	uniIcons,
	uniLoadMore,
    Markdown
  },
  props: {
    selectedListData: Object,
    selectedSingleData: Object,
    isLoading: Boolean
  },
  methods: {
	 formatDate(dateString) {
	      return dateString ? new Date(dateString).toLocaleDateString() : '';
	    },
	    
	    // 新的分享方法
	    handleShare() {
	      if (!this.selectedListData) return;
	      
	      // 获取当前页面实例
	      const pages = getCurrentPages();
	      const currentPage = pages[pages.length - 1];
	      
	      // 构建分享路径（兼容不同环境）
	      const sharePath = `/${currentPage.route || 'pages/wiki/index'}?path=${encodeURIComponent(this.selectedListData.path)}`;
	      
	      uni.share({
	        title: this.selectedListData.title,
	        desc: this.selectedListData.description || '来自知识库的分享',
	        path: sharePath,
	        success: () => {
	          uni.showToast({
	            title: '分享成功',
	            icon: 'success'
	          });
	        },
	        fail: (err) => {
	          console.error('分享失败:', err);
	          uni.showToast({
	            title: '分享失败',
	            icon: 'none'
	          });
	        }
	      });
	    }
  }
};
</script>

<style lang="scss" scoped>
.content-container {
  flex: 1;
  padding: 20px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.loading-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
  
  .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .loading-text {
      margin-top: 15px;
      color: #7f8c8d;
      font-size: 14px;
    }
  }
}

.content-wrapper {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  animation: fadeIn 0.3s ease;
}

.content-header {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  
  .content-title {
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.4;
    /* 确保长文本可以选中 */
    word-break: break-word;
  }
  
  .meta-info {
    display: flex;
    margin-top: 10px;
    
    .meta-item {
      display: flex;
      align-items: center;
      margin-right: 15px;
      
      .meta-text {
        margin-left: 5px;
        font-size: 13px;
        color: #7f8c8d;
      }
    }
  }
}

.description-box {
  margin: 20px 0;
  padding: 15px;
  background-color: #f8fafc;
  border-left: 3px solid #3498db;
  border-radius: 0 4px 4px 0;
  
  .description-text {
    font-size: 15px;
    line-height: 1.6;
    color: #34495e;
    word-break: break-word;
  }
}

.markdown-content {
  margin-top: 25px;
  line-height: 1.8;
  /* 确保 Markdown 内容可以选中 */
  user-select: text;
  -webkit-user-select: text;
}

.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
  
  .empty-image {
    width: 150px;
    height: 150px;
    opacity: 0.6;
  }
  
  .empty-text {
    margin-top: 15px;
    color: #95a5a6;
    font-size: 15px;
  }
}

.welcome-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
  
  .welcome-image {
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
  }
  
  .welcome-title {
    font-size: 22px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
  }
  
  .welcome-subtitle {
    font-size: 15px;
    color: #7f8c8d;
  }
}

/* 添加全局文本选中样式 */
text[user-select] {
  user-select: text;
  -webkit-user-select: text;
}

/* 确保所有文本元素都可以选中 */
.content-wrapper text {
  user-select: text;
  -webkit-user-select: text;
}
 
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>
